<extend name="public:base"/>

<block name="css">
    <link rel="stylesheet" href="__CSS__/sign.css?v={:config('app_ver')}" />
</block>

<block name="menu"></block>
<block name="left"></block>

<block name="main">
    <div class="regWrapper">
        <div class="regTitle cl">
            <h2 class="fl f22">绑定银行卡</h2>
            <span class="fr a999">绑定银行卡，绑定银行卡后才能进行快捷支付</span>
        </div>
        <div class="newRegStep cl forgetPwd">
            <form action="{:url('replace_bank')}" method="post" id="add_form">
                <input type="hidden" id="bank_name" name="bank_name" />
                <input type="hidden" id="bank_code" name="bank_code" />
                <input type="hidden" name="unique_code" id="unique_code" value="">
                {:token()}
                <ul class="fl">
                    <li class="minLi">
                        <div class="text">开户人姓名：</div>
                        <div class="right af60"><span class="f16">*{$info.real_name|mb_substr=1,3,'utf-8'}</span></div>
                    </li>
                    <li class="minLi">
                        <div class="text">身份证号：</div>
                        <div class="right af60"><span class="f16">{$info.idcard|mb_substr=0,6}********{$info.idcard|mb_substr=-4,4}</span></div>
                    </li>
                    <li>
                        <div class="text">开户银行：</div>
                        <div class="right">
                            <select class="select" style="width: 312px;" id="selectBank">
                                <volist name="bank_list" id="v">
                                    <option value="{$v.bank_code}" <if condition="$i eq 1">selected="selected"</if>>{$v.bank_name}</option>
                                </volist>
                            </select>
                        </div>
                    </li>
                    <li>
                        <div class="text">新银行卡号：</div>
                        <div class="right">
                            <input class="input_t" id="bank" name="card_id" value="" type="text"  placeholder="" />
                            <a href="javascript:void(0);" class="af90 bankQuota">查看银行限额？</a>
                        </div>
                    </li>
                    <li>
                        <div class="text">短信验证码：</div>
                        <div class="right">
                            <input type="number" min="0" name="scode" maxlength="6" value="" class="input" id="phoneCode" autocomplete="off" placeholder="请输入短信验证码"
                                   onkeyup="this.value=this.value.replace(/\D/g,'')" required/>
                            <input type="button" class="btn_b" style="height: 44px; right: 26px; top: 2px;" id="sendMsgBtn" value="获取短信验证码" />
                        </div>
                    </li>
                </ul>
                <div class="submitLine">
                    <p class="mb20 mt10">
                        <input type="submit" value="确定" class="btn_b" id="inputSubmit" />
                    </p>
                </div>
            </form>
        </div>
    </div>

    <div id="bankList_info" class="bankOpenFrame hide">
        <!--<p class="af00 small">提示：新卡首笔充值2个自然日后为老卡（24小时为一个自然日）</p>-->
        <ul class="bankList pt05">
            <volist name="bank_list" id="v">
                <li>
                    <img src="__IMG__/old_bank/{$v.bank_code}.jpg" class="bankImage" />
                    <!--<p class="blue">{$v.bank_name}</p>-->
                    <p class="a999 small">{$v.card_limit}</p>
                </li>
            </volist>
        </ul>
    </div>

</block>

<block name="js">

    <script type="text/javascript" src="__JS__/checkcode.js?v={:config('app_ver')}"></script>
    <script type="text/javascript">
        $(function () {

            $(document).ajaxStart(function () {
                $('#inputSubmit').addClass("not").attr("disabled", true).val('正在提交');
            }).ajaxStop(function () {
                $('#inputSubmit').removeClass("not").attr("disabled", false).val('确定');
            });

            $(".bankQuota").click(function () {
                layer.open({
                    type: 1,
                    title: "银行限额提示",
                    content: $("#bankList_info"),
                    area: ['704px', '448px'],
                    btn: []
                });
            });
            // 添加卡
            $("#add_form").submit(function () {
                if(!checkBank()){return false}

                var sms_code = $(this).find('#phoneCode').val() ;

                //验证短信验证码
                if (sms_code.length !== 6) {
                    layer.alert("请输入6位数字短信验证码", {icon: 2}, function (index) {
                        layer.close(index);
                        $("#phoneCode").focus();
                    });
                    return false;
                }

                return ajax_post($(this),1);
            });

            // 选择卡
            $("#selectBank").each(function () {
                var select = $(this).find("option:selected");
                $("#bank_code").val(select.val());
                $("#bank_name").val(select.html());
                $(this).change(function () {
                    var name = $(this).find("option:selected").html();
                    $("#bank_code").val($(this).val());
                    $("#bank_name").val(name);
                });
            });

            // 发送短信
            $('#sendMsgBtn').click(function () {
                if (!checkBank()) return false;
                $.ajax({
                    url: "{:url('uc/bank/replace_bank_before')}",
                    type: "post",
                    dataType: "json",
                    data: $("#add_form").serialize(),
                    success: function (data) {
                        if (data.code == 1) {
                            //设置Unique_code
                            if (data.data) {
                                $('#unique_code').val(data.data) ;
                            }
                            settTime();
                            layer.alert(data.msg, {icon: 1});
                        } else {
                            layer.alert(data.msg, {icon: 2});
                        }
                        return false;
                    }
                });
            });

        })
    </script>

</block>